<template>
    <div class="home_bg">
         <div class="header_content">
             <img class="logo_bg" src='../../assets/img/logo.jpg'>
             <el-input v-model="input" placeholder="请输入内容">
                 <i class="el-icon-search el-input__icon" slot="suffix" @click="handleIconClick"> </i>
             </el-input>
             <el-dropdown placement="top-start"  @command="handleCommand" v-if="ifLogin">
                <el-avatar icon="el-icon-user-solid" :src="avatarUrl"></el-avatar>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="setting">账户设置</el-dropdown-item>
                    <el-dropdown-item command="quit">退出</el-dropdown-item>
                </el-dropdown-menu>
             </el-dropdown>
             <button v-else class="login_btn" @click="goLogin">登录</button>
         </div>
         <div :class="navBarFixed == true ? 'navBarWrap' :'navBar'">
             <div :class="navBarFixed == true ? 'nav-sub-wrapper':'nav-sub'">
                 <a v-for="item in navs" :href="item.url" class="nav-link">{{item.label}}</a>
             </div>
             
        </div>
         <div>
             <router-view></router-view>
         </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            input:'',
            navBarFixed:false,
            avatarUrl:'',
            ifLogin:'',
            navs:[
                {
                    label:"首页",
                    url:'#/userwelcome'
                },
                {
                    label:"租赁商品",
                    url:'#/goodlist'
                },
                {
                    label:'共享商品',
                    url:'#/sharegoodlist'
                },
                {
                    label:'我的购物车',
                    url:'#/userCart'
                },
                {
                    label:'我的收藏',
                    url:'#/userCollect'
                },
                {
                    label:'我的订单',
                    url:'#/myorder'
                }
            ]
        }
    },
    methods:{
        goLogin()
        {
            this.$router.push("/login");
        },
        handleCommand(command)
        {
            if(command=='setting')
            {
                this.$router.push("/userAccount");
            }
            else if(command=='quit')
            {
                this.$router.push("/login");
            }
        },
        handleIconClick()
        {

        },
         watchScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        //  当滚动超过 50 时，实现吸顶效果
        if (scrollTop > 49) {
          this.navBarFixed = true
        } else {
          this.navBarFixed = false
        }
        
     }
    },
    mounted(){
         window.addEventListener('scroll',this.watchScroll);
    },
    created()
    {
        this.ifLogin=window.sessionStorage.getItem("user");
        this.avatarUrl=window.sessionStorage.getItem("userAvatar");
    }
}
</script>

<style lang="less" scoped>
.home_bg
{
    background-color: #ededed;
}
.login_btn{
    margin-right: 100px;
    margin-top:20px;
    height:40px;
    width:100px;
    border-radius: 10px;
    background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);
    cursor: pointer;
    transition: .5s;
    &:hover
    {
        transform: scale(1.1);
    }
}
/deep/.header_content{
    position: relative;
    z-index: 10;
    transition: top .3s,background-color .3s;
    height: 90px;
    background-color: #000;
    display: flex;
    .el-input
    {
        width:400px;
        margin:20px auto;
    }
    .el-avatar
    {

        margin-top:20px;
        margin-right:100px;
    }
 
}
.navBar
{
    position: relative;
    z-index: 20;
    height: 90px;
    background: #f7f7f7;
    box-shadow: 0 2px 4px rgb(0 0 0 / 4%);
    .nav-sub
    {
        padding: 31px 0;
        height: 90px;
        position: relative;
        display: flex;
        justify-content: space-between;
        width:800px;
        margin:0 auto;
    }
}
.navBarWrap
{
    position: fixed;
    z-index: 999;
    height: 60px;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #dadada;
    background-image: linear-gradient(#fff,#f1f1f1);
    .nav-sub-wrapper{
        padding: 0;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
         width:800px;
        margin:0 auto;
    }
}
.nav-link
{
    display: block;
    padding: 0 10px;
    color: #666;
    font-style: normal;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease-out;
    font-size: 14px;
    &:hover{
        color:#5079d9;
    }
}
</style>